// JavaScript Document
var canvas=
document.getElementById("canvas")
context=
canvas.getContext("2d")
canvas.width=800;
canvas.height=600
var inMouseDown=false;
var curLoc={x:0,y:0}
var image=new Image();
image.src="img/4.jpg";

var clippingRegion={x:400,y:300,r:100}		//设置切割区域，矩形

image.onload=function(e){
	initCanvas();	//图片加载完初始化画布	
}

function initCanvas(){
	
	draw(image,clippingRegion)
}
	
function draw(image,clippingRegion){
	
	context.save();	
	
	context.beginPath();
	context.arc(clippingRegion.x,
				clippingRegion.y,
				clippingRegion.r,
				0,
				2*Math.PI,
				false
				)
	context.clip();//切割
	context.drawImage(image,0,0)
	context.restore()
}
canvas.onmousedown=function(e){
	inMouseDown=true
}
canvas.onmousemove=function(e){
	if(inMouseDown){
		curLoc=
	windowsToCanvas(e.clientX,
					e.clientY)
		clippingRegion.x=
		curLoc.x
		clippingRegion.y=
		curLoc.y
		clippingRegion.r=
		10
	draw(image,clippingRegion)
	}
}
canvas.onmouseup=function(e){
	inMouseDown=false
}

function windowsToCanvas(x,y)
{
	var bbox=
	canvas.getBoundingClientRect()
	return{x:Math.round(x-bbox.left),
		   y:Math.round(y-bbox.top)}
}
